{include file='common/doc'}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="display: none;">
        </div>
        <div class="layui-card-body">
            <table id="table_list" lay-filter="table_list"></table>
            <template id="table_toolbar">
                <div class="layui-btn-group">
                    <?php echo $operation['toolbar'] ?>
                </div>
            </template>
            <script type="text/html" id="op_table">
                    <?php echo $operation['tool'] ?>
            </script>
            <script type="text/html" id="buttonTpl">
                {{#  if(d.status == 1){ }}
                <button class="layui-btn layui-btn-xs">启用</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-primary layui-btn-xs">禁用</button>
                {{#  } }}
            </script>
        </div>
    </div>
</div>
<template id="form_template" style="display: none">
    <form class="layui-form"  id='form' lay-filter="form" style="margin-top:10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="admin_group_name" placeholder="请输入角色名称"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择权限</label>
            <div class="layui-input-block">
                <div id="tree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="remarks" placeholder="请输入描述内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>
</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','jquery', 'authtree', 'form', 'layer','table'], function(){
        var $ = layui.jquery;
        var authtree = layui.authtree;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        table.render({
            elem: '#table_list'
            ,height: 'full-50'
            ,toolbar: '#table_toolbar'
            ,url: 'read' //数据接口
            ,page: true //开启分页
            ,limit:20
            ,cols: [
                [ //表头
                    {type: 'checkbox' ,fixed: 'left'} ,
                    {type: 'numbers' ,fixed: 'left'}
                    ,{field: 'admin_group_name' ,align: "center" ,title: '组名'}
                 /*   ,{field: 'menu_id_list' ,align: "center" ,title: '组权限'}*/
                    ,{field: 'addtime' ,title: '添加时间' ,sort: true}
                    ,{field: 'status' ,title: '状态' ,align: "center" ,templet: '#buttonTpl'}
                    ,{field: 'remarks' ,title: '描述'}
                    ,{title: '操作' ,width: 150 ,align: 'center' ,fixed: 'right' ,toolbar: '#op_table'}
                ]
            ]
        });
        //头工具栏事件

        function trees(checked =false ){
             checked = checked  ? checked : '';
            $.ajax({
                url: 'read?type=tree',
                method:'get',
                data:{'checked':checked},
                dataType: 'json',
                success: function(data){
                    // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                    authtree.render('#tree', data.data, {
                        inputname: 'menu_id_list[]'
                        ,layfilter: 'lay-check-auth'
                        // ,dblshow: true
                        // ,dbltimeout: 180
                        // ,autoclose: false
                        // ,autochecked: false
                        // ,openchecked: false
                        // ,openall: true
                        // ,hidechoose: true
                        // ,checkType: 'radio'
                        // ,checkedKey: 'checked'
                        // ,disabledKey: 'disabled'
                        // ,checkSkin: 'primary'
                        ,'theme': 'auth-skin-default'
                        // ,'themePath': 'themes/'
                        ,autowidth: true
                    });
                },
            });
        }


        function lgp_open(data={}){
            layer.open({
                type: 1 ,
                title: '用户编辑' ,
                area: ['500px','500px'] ,
                content: $('#form_template').html() ,
                success: function (lay ,index) {
                    form.render();
                    let  url = 'add';
                    trees();
                    if (JSON.stringify(data)!=='{}'){
                        url = 'upd';
                        trees(data['menu_id_list']);
                        form.val('form' ,data);
                    }
                    form.on('submit(form_submit)' ,function (res) {
                        Object.assign(data, res.field);
                        let status = request({'url': url, 'data': data});
                        if (status) {
                            layer.close(index);
                            table.reload('table_list');
                        }
                        return false;
                    });
                }
            })
        }
        table.on('toolbar(table_list)' ,function (obj) {
            let event = obj.event;
            var checkStatus = table.checkStatus(obj.config.id);
            if (event == 'add') {
               lgp_open();
            }

        });
        table.on('tool(table_list)' ,function (obj) {
            let event = obj.event;
            if (event == 'upd') {
                lgp_open(obj.data)
            }
            if (event == 'del') {
                let status = request({'url': 'del', 'data': {'admin_group_id':obj.data['admin_group_id']}});
                if (status) {
                   obj.del();
                }
            }
        });


    });
</script>
</html>

